<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			ul,
			li {
				list-style: none;
			}

			.password-div input {
				width: 1px;
				height: 1px;
				opacity: 0;
				border: 0;
			}

			.password-lable {
				height: 30px;
				clear: both;
			}

			.password-lable li {
				float: left;
				width: 30px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				border: 1px solid #dedede;
				margin-left: -1px;
			}
		</style>
	</head>

	<body>
		<div class="password-div">
			<label for="password" class="password-lable">
			<ul id="www">
				<li class="aa"></li>
				<li class="aa"></li>
				<li class="aa"></li>
				<li class="aa"></li>
				<li class="aa"></li>
				<li class="aa"></li>
			</ul>
			<input id="password"  type="number" name="password" maxlength="6">
			<!--<input id="password"  onkeyup="OnInput (event)" type="number" name="password" maxlength="6">-->

		</label>
		</div>
	</body>
	<script type="text/javascript" src="../script/jquery-2.1.0.js">
	</script>
	<script type="text/javascript">
//		function OnInput(event) {
//			var number = 6; //定义输入最大值
//			var pw = document.getElementById("password").value; //定义pw为name是password的input框的输入值
//			var list = document.getElementsByClassName("aa"); //定义list是li
//			for(var i = 0; i < number; i++) { //for循环遍历将·放入li标签
//				if(pw[i]) {
//					list[i].innerText = pw[i];
//				} else {
//					list[i].innerText = " ";
//				};
//			};
//			console.log(pw)
//		}

					$(".password-div input").on("input",function(e){ //标签为password-div下的input添加oninput事件
						var number = 6;   //定义输入最大值
						var pw = $("input[name = 'password']").val(); //定义pw为name是password的input框的输入值
						var list = $(".password-div ul li");  //定义list是li
						for(var i = 0; i < number ; i++){    //for循环遍历将·放入li标签
							if(pw[i]){
								$(list[i]).text("*");
							}else{
								$(list[i]).text("");
							};
						};
					});
					$(".password-div ul").click(function(){
						$("input[name = 'password']").val("");
						$("#password").focus();
						$(".password-div ul li").text("");
					});
	</script>
